/**
 * Tab
 *
 * Tab region
 *
 * Style guide regions.tab
 */
.tab {
    display: flex;
    height: 8vh;
    margin-left: auto;
    border-bottom: 0.5vh solid lighten($color-tabname, 15);

    /**
     * Tab list
     *
     * Markup: tab_list.hbs
     *
     * Style guide regions.tab.list
     */
    &-list {
        align-items: stretch;
        display: flex;
        height: 10vh;
        width: 70%;
        @media screen and (max-width: $bkpt-m) {
            flex-direction: column;
            padding: 0;
            width: 100%;
        }
    }
    &-item {
        align-items: center;
        display:flex;
        font-size: 1em;
        height: 100%;
        justify-content: center;
        list-style-type: none;
        text-transform: capitalize;
        @media screen and (max-width: $bkpt-m) {
            width: 100%;
        }
        &--link {
            align-items: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 5vh;
            text-align: center;
            width: 10rem;
            @media screen and (max-width: $bkpt-m) {
                text-align: center;
                width: 100%;
            }
        }
        &--add {
            align-items: center;
            display: flex;
            justify-content: center;
            min-width: 3rem;
        }
    }

    /**
     * Tab form.
     *
     * Form to manage tabs.
     *
     * Markup: tab_form.hbs
     *
     * Style guide regions.tab.form
     */
    &-form {
        /**
         * Form tab header.
         *
         * Style guide regions.tab.form.header
         */
        &--header {
            height: 4vh;
            width: 100%;
        }

        /**
         * Form tab fieldset.
         *
         * Style guide regions.tab.form.fieldset
         */
        &--fieldset {
            display: flex;
            margin-bottom: 1vh;
        }

        /**
         * Form tab label.
         *
         * Style guide regions.tab.form.label
         */
        &--label {
            position: absolute;
            width: 5rem;
        }

        /**
         * Form tab input.
         *
         * Style guide regions.tab.form.input
         */
        &--input {
            margin-left: 5rem;
        }

        /**
         * Form tab submit.
         *
         * Style guide regions.tab.form.submit
         */
        &--action {
            width: 100%;
        }
    }

    /**
     * Actions available for a tab.
     *
     * Style guide regions.tab.action
     */
     &-action {
        margin-left: auto;
        margin-right: 0.3rem;
     }
}
